<template>
    <div>
        <!-- <div>商品管理</div> -->
        <el-form ref="form" :model="form" label-width="100px" :inline="true">
            <el-form-item label="添加商品时间">
                <el-date-picker
                    v-model="arrTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="timeClick">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="form.goodsName" placeholder="请输入商品名称" ></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.goodsState" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="上架审核" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
                <el-option label="下架" value="2"></el-option>
                <el-option label="上架驳回" value="3"></el-option>
                <el-option label="下架审核" value="4"></el-option>
                <el-option label="下架驳回" value="5"></el-option>
                <el-option label="待上架" value="8"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryclcik">查询</el-button>
            </el-form-item>
        </el-form>
        
                <el-table 
                :data="tableData"
                border
                width='100%'
                >
                <el-table-column
                  prop="createTime"
                  label="添加商品时间"
                  >
                
                </el-table-column>
                <el-table-column
                  prop="mainPic"
                  label="商品主图"
                >
                 <template slot-scope="scope" >
                     <div style="text-align:center;" >
                        <img :src="scope.row.mainPic" alt="" style="width:100px;height:50px;" @click="enter1(scope.row)" >
                       
                    </div>

                </template>
                </el-table-column>
                <el-table-column
                  prop="goodsNo"
                  label="商品编码"
                 >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="商品名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="商品价格/元"
                  >
                </el-table-column>
                <el-table-column
                  prop="unit"
                  label="计量单位"
                  >
                </el-table-column>
                <el-table-column
                  prop="inventory"
                  label="总库存量"
                 >
                </el-table-column>
                <el-table-column
                  prop="remain"
                  label="剩余库存量"
                  >
                </el-table-column>
                    <el-table-column
                    prop="state"
                    label="状态"
                    >
                    <template  slot-scope="scope">
                        <div>{{state(scope.row.state)}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="操作"
                    >
                    <template  slot-scope="scope">
                        <div>
                             <!-- 下架审核2 -->
                            <div v-if="scope.row.state == 2">
                                <el-button  type="text" size="small"  @click="handleClick(scope.row)" >查看</el-button>
                                <el-button type="text" size="small" @click="editclick(scope.row)" >修改</el-button>
                                <el-button type="text" size="small" @click="shelfup(scope.row)" >上架</el-button>
                                <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                            </div>
                             <!-- 上架审核0 -->
                            <div v-if="scope.row.state == 0">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            </div>
                            <!-- 已上架1 -->
                            <div v-if="scope.row.state == 1">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="shelfdown(scope.row)">下架</el-button>
                            </div>
                              <!-- 上架驳回3 -->
                            <div v-if="scope.row.state == 3">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="editclick(scope.row)" >修改</el-button>
                                    <el-button type="text" size="small" @click="shelfup(scope.row)" >上架</el-button>
                                    <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                                    <el-button type="text" size="small" @click="seeReason(scope.row)">查看原因</el-button>
                                    
                            </div>
                            <!-- 下架审核4 -->
                            <div v-if="scope.row.state == 4">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                           </div> 
                           <!-- 下架驳回5 -->
                            <div v-if="scope.row.state == 5">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="seeReason(scope.row)">查看原因</el-button>
                                    <el-button type="text" size="small" @click="shelfdown(scope.row)">下架</el-button>
                            </div>
                            <!-- 待上架8 -->
                            <div v-if="scope.row.state == 8">
                                <el-button type="text" size="small" @click="shelfup(scope.row)" >上架</el-button>
                                <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                          </div>
                        </div>
                    </template>
                </el-table-column>
                
              </el-table>
              <div>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    :current-page="page.current" 
                    :page-sizes="[5,10,20,30,40]" 
                    :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
                    </el-pagination>
              </div>
              <el-dialog
                title="查看原因"
                :visible.sync="dialogVisible"
                width="30%"
               >
                <span>{{reason}}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
             </el-dialog>
             <el-dialog
                title="提示"
                :visible.sync="imgVisible"
                width="1000px"
                >
               <div style="text-align: center;"><img :src="imgsrc" alt="" style="width:692px;height:290px;"></div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="imgVisible = false">取 消</el-button>
                    <el-button type="primary" @click="imgVisible = false">确 定</el-button>
                </span>
                </el-dialog>
               
        </div>
</template>
<script>
import { mapState,mapGetters, mapMutations, mapActions } from "vuex";
export default {
          data() {
            return {
              form: {
                goodsName: '',
                goodsState: '',
                goodsType:2,
                startTime:'',
                endTime:'',
                currentPage:1,
                pageSize:10
              },
              arrTime:'',
              page:{
                  current:1,
                  pageSize:10,
                  total:100
              },
              tableData: [],
                
                dialogVisible:false,
                imgVisible:false,
                params:{
                    goodsNo:'',
                    state:'',
                    inventory:'',
                    remain:'',
                    delFlag:''
                },
                imgsrc:'',
                reason:''

            }
          },
          computed: {
            
          },
          methods: {
            async initData(){
                let {data} = await this.$post({
                    api:'/api/goods/getGoodsList',
                    data:this.form
                })
                if(data.code === 0){
                    this.tableData = data.data.list;
                    this.page.total = data.data.total;
                    this.page.pageSize = data.data.pageSize;
                    this.page.current = data.data.pageNum;
                    // console.log(data)
                }
            },
            //上架，下架 ，修改
            async updateGoodsNo(){
                if(this.params.delFlag){
                    let {data} = await this.$post({
                    api:'/api/goods/updateGoodsNo',
                        data:{
                            goodsNo:this.params.goodsNo,
                            state:this.params.state,
                            delFlag:this.params.delFlag
                        }
                    })
                    if(data.code === 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        this.initData();
                        console.log(data)
                    }
                }else if(this.params.state === 1){
                    let {data} = await this.$post({
                    api:'/api/goods/updateGoodsNo',
                        data:{
                            goodsNo:this.params.goodsNo,
                            state:this.params.state,
                            delFlag:this.params.delFlag
                        }
                    })
                    if(data.code === 0){
                        this.$message({
                            type: 'success',
                            message: '上架成功'
                        });
                        this.initData();
                        console.log(data)
                    }
                }else if(this.params.state === 2){
                    let {data} = await this.$post({
                    api:'/api/goods/updateGoodsNo',
                        data:{
                            goodsNo:this.params.goodsNo,
                            state:this.params.state,
                            delFlag:this.params.delFlag
                        }
                    })
                    if(data.code === 0){
                        this.$message({
                            type: 'success',
                            message: '下架成功'
                        });
                        this.initData();
                        console.log(data)
                    }
                }
                
            },
            state(n){
                let params = ''
                switch (n){
                    case 0:
                    params = '上架审核';
                    break;
                    case 1:
                    params = '上架';
                    break;
                    case 2:
                    params = '下架';
                    break;
                    case 3:
                    params = '上架驳回';
                    break;
                    case 4:
                    params = '下架审核';
                    break;
                    case 5:
                    params = '下架驳回';
                    break;
                    case 6:
                    params = '待入库';
                    break;
                    case 7:
                    params = '已入库';
                    break;
                    case 8:
                    params = '待上架';
                    break;
                    default:
                }
                return params
            }, 
            
            //查看
            handleClick(row) {
                
                this.$router.push({path:'/seegoods',query:{goodsNo:row.goodsNo}})
                console.log(row);
            },
            //查看原因
            seeReason(row){
                this.dialogVisible = true;
                this.getReason(row.goodsNo)
            },
            //查看原因
            async getReason(goodsNo){
                
                let {data} = await this.$post({
                    api:'/api/goods/getReason',
                    
                    data: {
                        goodsNo:goodsNo
                    }
                });
                if(data.code === 0){
                    this.reason = data.data
                    // console.log(data)
                    // this.$message({
                    //         type: 'success',
                    //         message: data.msg
                    //     })
                    
                    
                    
                }else{
                    this.$message({
                            type: 'error',
                            message: data.msg
                        })  
                }
            },
            //上架
            shelfup(row){
               this.params.goodsNo = row.goodsNo;
               this.params.state = 1;
                this.$confirm('确认要上架此商品吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.updateGoodsNo()
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
            },
            //下架
            shelfdown(row){
                this.params.goodsNo = row.goodsNo;
               this.params.state = 2;
                this.$confirm('确认要下架此商品吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.updateGoodsNo()
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
            },
            //删除
            handleDel(row){
                this.params.goodsNo = row.goodsNo;
               this.params.delFlag = 1;
                this.$confirm('确认要删除此商品吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.updateGoodsNo()
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            
            handleSizeChange(val) {
                this.form.pageSize = val;
                this.initData()
                
            },
            handleCurrentChange(val) {
                this.form.currentPage = val;
                this.initData()
                
            },
            enter(column){
                this.imgVisible = false;
                // console.log(column)
            },
            enter1(row){
                this.imgVisible = true;
                this.imgsrc = row.mainPic
                console.log(row)
            },
            
            timeClick(arr){
             
              if(arr == null){
                this.form.startTime = '';
                this.form.endTime = ''
              }else{
                this.form.startTime = arr[0];
                this.form.endTime = arr[1];
              }
                console.log(arr)
            },
            editclick(row){
                this.$router.push({path:'/addgoods',query:{goodsNo:row.goodsNo,id:1}})
                // this.$router.push('addgoods?id=1')
                
            },
            queryclcik(){
                this.initData()
            },
            getBtn(){
                let arrBtn = this.$store.state.meuns;
                arrBtn.forEach(element => {
                    element.menuName == '商城商品管理';
                });
            }
          },
          mounted () {
              this.initData();
              console.log(this.$store.state.meuns,'123')
          }
        }
      </script>